<template>
  <div class="my-selection">
    <a-cascader
      :getPopupContainer="getPopupContainer"
      v-model:value="value1"
      class="select"
      :options="options"
      @change="change"
      placeholder="请选择"
    ></a-cascader>
  </div>
</template>

<script setup>
import { computed, ref } from "vue";

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});

const value1 = ref([]);

const transformTreeData = (data) => {
  return data.map((item) => ({
    value: item.addressId,
    label: item.addressName,
    children: item.children ? transformTreeData(item.children) : [],
  }));
};

const options = computed(() => transformTreeData(props.list));

const getPopupContainer = (dom) => {
  return dom.parentNode;
};

const emit = defineEmits(["value1"]);
const change = (value) => {
  emit("value1", value);
};
</script>

<style>
.ant-cascader-menus {
  left: 0 !important;
  top: 100% !important;
  background-color: #6c869a !important;
}

.ant-cascader-menu-item-active {
  color: #fff !important;
}
.ant-select-selection-placeholder {
  color: #fff !important;
  line-height: 56px !important;
}
</style>

<style scoped>
.my-selection {
  width: 100%;
  height: 56px;
  pointer-events: all;
}

.select {
  width: 100%;
  height: 100%;
}
</style>
